<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加课程</title>
<link rel="stylesheet" type="text/css"
	href="/bootstrap/bootstrap.4.1.0.css">
<script src="/bootstrap/jquery.3.2.1.min.js"></script>
<script src="/bootstrap/popper.12.5.min.js"></script>
<script src="/bootstrap/bootstrap.4.1.0.min.js"></script>
<script src="/layui/layer/layer.js"></script>
<script src="/vue/Vue.js"></script>
<script src="/vue/axios.js"></script>
<script type="text/javascript">
	$(function() {
		$("#header").load("header.html");
		
	})
</script>
</head>
<body>
	<div id="header" ></div>
	<div id="app" class="container">
		<div><label>课程名称:</label><input type="text" v-model="coursename"></div>
		<div><label>价格:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label><input type="number" v-model="price"></div>
		<div><button class="btn btn-outline-info" @click="add">添加</button></div>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			coursename:"",
			price:"",
		},
		methods:{
			add:function(){
				axios.get("/course/add?name="+this.coursename+"&price="+this.price).then( res=> {
					if(res.data.code==1){
						this.coursename = "";
						this.price = "";
						layer.alert("课程添加成功");
					}else if(res.data.code==2){
						layer.alert("系统维护中，请稍后再试");
					}else if(res.data.code==3){
						layer.alert("您已添加过该课程，请勿重复添加!")
						this.coursename = "";
					}
				})
			}
		}
	})
</script>
</html>